<template>
  <div class="warp-box">
    <el-row class="search-box" :gutter="10">
      <el-col :span="20">
        <el-date-picker
          v-model="parames.performanceMonth"
          type="month"
          size="small"
          :clearable="false"
          value-format="yyyy-MM"
          placeholder="选择月">
        </el-date-picker>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <!-- <el-button size="small" type="text" icon="el-icon-s-open" @click="handleSearch">高级搜索</el-button> -->
      </el-col>
    </el-row>
    <el-row class="main-box channel1234" style="margin:10px -5px;">
      <el-col :span="24">
        <!-- <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">新建客户</el-button> -->
      </el-col>
      <el-col :span="24">
        <el-table
          :data="tableData"
          border
          v-loading="loading"
          :row-class-name="tableRowClassName"
          style="margin-top:14px;"
        >
            <!-- employeePerformanceList -->
          <el-table-column prop="departmentName" label="所属部门名称"></el-table-column>
          <el-table-column prop="performanceMonth" label="绩效年月"></el-table-column>
          <el-table-column prop="signCount" label="签单数量"></el-table-column>
          <el-table-column prop="signAmount" label="签单基数"></el-table-column>
          <el-table-column prop="signCommission" label="签单提成"></el-table-column>
          <el-table-column prop="serviceCount" label="服务数量"></el-table-column>
          <el-table-column prop="serviceAmount" label="服务提成"></el-table-column>
          <el-table-column prop="monthTotalAmount" label="月总基数"></el-table-column>
          <el-table-column prop="monthTotalCommission" label="月总提成"></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <pages :parames="parames" @render="checkPage"></pages>
      </el-col>
    </el-row>
    <amountDialog :mountData="mountData" @checkRender="getList"></amountDialog>
  </div>
</template>

<script>
import amountDialog from './addAmountDialog'
export default {
  data() {
    return {
      loading: false,
      parames: {
        page: 1, //页码index
        limit: 10, //页码最大
        customerName: '', //联系人名称
        performanceMonth: '',
        totalCount: 0,
        search: []
      },
      searchData: {
        //搜索弹窗
        show: false
      },
      mountData: {
        disposableMark: '',
        taskId: '',
        show: false
      },
      tableData: []
    };
  },
  components: {
    amountDialog
  },
  methods: {
    checkPage () {
      this.getList()
    },
    handleSetTitle () { //设置表头列
      this.titleData.show = true
    },
    handleSend (row) {//提交签单绩效
      this.mountData.type = 'fuwu'
      this.mountData.disposableMark = row.disposableMark
      this.mountData.taskId = row.taskId
      this.mountData.show = true
    },
    getList() {//获取页面数据
      this.loading = true
      this.$post(this.$api.postPerformanceListDepartmentEmployeePerformance,this.parames).then(response => {
        if (response.status == 200) {
          this.parames.totalCount = response.data.totalCount
          this.tableData = response.data.data
        }
        setTimeout(() => {
          this.loading = false
        }, 200);
      })
    },
    search() {
      //查询
      this.pageindex = 1;
      this.getList()
    },
    handleSearch() {
      //打开高级搜索弹窗
      this.searchData.show = true;
    },
    tableRowClassName({ row, rowIndex }) {
      //斑马表格
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
      return "";
    }
  },
  mounted() {
    this.parames.performanceMonth = this.$utils.getDate('yearMonth')
    this.getList()
  }
};
</script>

<style>
.el-table .warning-row {
  background: #f9f9f9;
}
.el-table .success-row {
  background: #fff;
}
</style>